<template>
  <scroll class="car_detail__container">
    <div>
      <sl-gutter size="6"/>
      <car-type-card/>
      <sl-gutter size="9"/>
      <sl-group-item titleLeft="支付方式" :titleRight="applyWay.value" @click.native="popupApplyVisible = true" icon/>
      <sl-group-item titleLeft="出行类别" :titleRight="travelTypes.value" @click.native="popupTravelTypesVisible = true" icon v-show="applyWay.value === '企业账户支付'"/>
      <sl-group-item titleLeft="费用归属" :titleRight="selectedCostCenter.name" @click.native="popupCostCenterVisible = true" icon v-show="applyWay.value === '企业账户支付'"/>
      <sl-group-item titleLeft="附加信息" @descChange="onChangeDescInfo" orderDesc="请填写审批的附加信息"/>
      <sl-title title="退改规则">
        <div slot="titleCont">
          <p>1、司机接单后开始计算时间，3分钟内可以免费取消订单，司机接单后3分钟，需要支付5元<span style="color: #f60">违约金</span></p>
          <p>2、司机在开始服务后订单<span style="color: #f60">不可取消</span></p>
          <p>3、订单不支持修改</p>
        </div>
      </sl-title>
      <div class="base-padding call_car_btn">
        <x-button plain type="primary"
                  :disabled="callCarLoading"
                  :show-loading="callCarLoading"
                  :class="{'x-button-disabled': callCarLoading}"
                  @click.native="onClickSubmit">叫车</x-button>
      </div>
    </div>
    <!-- 支付方式 -->
    <div v-transfer-dom>
      <Popup v-model="popupApplyVisible" position="bottom" max-height="50%" style="background: none">
        <group>
          <radio :options="handlePublicPayAuth" v-model="applyWay.key" @on-change="onChangeApplyWay"/>
        </group>
      </Popup>
    </div>
    <!-- 差旅类型 -->
    <div v-transfer-dom>
      <Popup v-model="popupTravelTypesVisible" position="bottom" max-height="50%" style="background: none">
        <group>
          <radio :options="handleTravelTypes" v-model="travelTypes.key" @on-change="onChangeTravelTypes"/>
        </group>
      </Popup>
    </div>
    <!-- 费用归属 -->
    <cost-to-attribution :visible.sync="popupCostCenterVisible"
                         ref="costAttr"
                         @selected="onClickCostCenterItem"/>
  </scroll>
</template>
<script type="text/ecmascript-6">
import { mapState, mapMutations } from 'vuex'
import { car } from '../data'
import { CostToAttribution } from 'wxm-common'
import { Popup, Radio, Group, XButton, TransferDomDirective as TransferDom } from 'vux'
import CarTypeCard from './modules/car-type-card/car-type-card'
import slGroupItem from './modules/sl-group-item/sl-group-item'
import slTitle from './modules/sl-title/sl-title'
import * as util from 'utils/utils'
export default {
  components: {
    Popup, Radio, Group, CarTypeCard, slGroupItem, slTitle, XButton, CostToAttribution},
  data () {
    return {
      data: {},
      pageTitle: '用车',
      remark: '',
      callCarLoading: false,
      popupApplyVisible: false,
      popupTravelTypesVisible: false,
      attributionVisible: false,
      popupCostCenterVisible: false,
      options: {},
      applyWay: {},
      travelTypes: {},
      selectedCostCenter: []
    }
  },
  computed: {
    ...mapState([
      'userCarState'
    ]),
    handlePublicPayAuth () {
      const PAY_WAY = this.userCarState.userCarPayWay;
      let _options = [];
      Object.keys(PAY_WAY).forEach(item => {
        _options.push({
          key: item,
          value: PAY_WAY[item]
        })
      });
      if (this.options.publicPayAuth) {
        this.applyWay = util.deepClone(_options[1])
      } else {
        this.applyWay = util.deepClone(_options[0])
      }
      return _options
    },
    handleTravelTypes () {
      let _options = [];
      if (!util.isEmptyObject(this.options) && this.options.travelTypes.length > 0) {
        this.options.travelTypes.forEach(_item => {
          _options.push({
            key: _item.travelCode,
            value: _item.travelName
          })
        })
      }
      if (_options.length === 0) {
        _options = [
          {
            key: '',
            value: ''
          }
        ]
      }
      this.travelTypes = util.deepClone(_options[0]);
      return _options
    }
  },
  mounted () {
    this.SET_USER_CAR_TITLE(store.get('USER_CAR_DISTANCE'));
    this._getInitDate()
  },
  methods: {
    ...mapMutations([
      'SET_USER_CAR_TITLE'
    ]),
    // 获取支付方式以及差率类型
    _getInitDate () {
      car.preCompany({}).then(res => {
        if (res.data.code === 0) {
          this.data = res.data.data;
          this.options = this.data
        } else {
          this.$vux.toast.show({
            time: 1000,
            type: 'warn',
            text: res.data.msg,
            position: 'middle'
          })
        }
      })
    },
    onChangeDescInfo (item) {
      this.remark = item
    },
    // 选择支付方式方法
    onChangeApplyWay (key, value) {
      this.applyWay.value = value;
      this.applyWay.key = key;
      // 当选择支付方式后 隐藏popup
      this.popupApplyVisible = false
    },
    // 差旅类型选中类型
    onChangeTravelTypes (key, value) {
      this.travelTypes.value = value;
      this.travelTypes.key = key;
      this.popupTravelTypesVisible = false
    },
    // 费用归属选中类型
    onClickCostCenterItem (cost) {
      if (!cost) return;
      if (cost.constructor !== Array) {
        let all = this.$refs.costAttr.costAttribution;
        let data = all.filter(item => {
          return item.costUnitCode === cost.curCostId
        });
        this.selectedCostCenter = data[0];
      } else {
        this.selectedCostCenter = cost.splice(-1)[0]
      }
    },
    // 提交叫车订单
    onClickSubmit () {
      this.callCarLoading = true;
      if (!this.selectedCostCenter.costUnitCode) {
        this.$vux.toast.show({
          time: 1000,
          type: 'warn',
          text: '请选择费用归属',
          position: 'middle'
        });
        return
      }
      let _params = store.get('USER_CAR_TYPE_DATA')
      car.createOrder({
        orderId: _params.preId,
        paymentMethod: this.applyWay.key,
        estimatePrice: _params.price,
        priceEstimateMark: _params.priceEstimateMark,
        supplierCd: _params.supplierCd,
        remark: this.remark,
        // allocationType: this.costCenter.value,
        costUnitCode: this.selectedCostCenter.costUnitCode,
        orgId: this.selectedCostCenter.orgId,
        corporationId: this.selectedCostCenter.corporationId,
        travelCode: Number(this.travelTypes.key),
        vehicleSeats: _params.seats,
        baggages: _params.baggages,
        carTypeName: _params.carTypeName,
        carTypeDesc: _params.carTypeDesc
      }).then(res => {
        this.callCarLoading = false;
        if (res.data.code === 0) {
          store.set('CAR_CAR_TIME', Date.now());
          this.$router.push({
            path: `/carIndex/waitCar/${_params.preId}`
          });
          store.remove('USER_CAR_TYPE_ALL_DATA')
        } else {
          this.$vux.toast.show({
            width: '10rem',
            time: 3000,
            type: 'warn',
            text: res.data.msg,
            position: 'middle'
          })
        }
      })
    }
  },
  directives: {
    TransferDom
  }
}
</script>
<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"

  .car_detail__container
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background $sl_theme_bg
    .apply-method
      font-size 18px
      .item
        padding-top 2 * .61rem
        padding-bottom  2 * .61rem
        display flex
        justify-content space-between
        align-items center
        position relative
        span
          display none !important
          position absolute
          top 50%
          right 1.5 * .61rem
          transform translateY(-50%)
        &.active
          span
            display block !important
        &:nth-child(1)
          border-bottom 1px #ddd solid
    .color-default
      color $font_color_desc !important
    .call_car_btn
      padding-top 20px
      padding-bottom 20px
      button
        color #fff
        border none
        background #46a1bb
        &.x-button-disabled
          background #f1f1f1
          border: 1px solid #ddd;
</style>
